<template>
    <div>
        <slot />
        <el-tabs v-model="query.tab">
            <el-tab-pane v-for=" (val,key) in tabHead" :key="key" :label="key" :name="val" />
        </el-tabs>
        <div>
            <div class="inline">
                <span>维度1</span>
                <el-select v-model="query.x" placeholder="全部">
                    <el-option v-for="(name,key) in list1" :key="key" :label="key" :value="name" />
                </el-select>
            </div>
            <div class="inline">
                <span>维度2</span>
                <el-select v-model="query.y" placeholder="全部">
                    <el-option v-for="(name,key) in list2" :key="key" :label="key" :value="name" />
                </el-select>
            </div>
        </div>
        <vbar class="chart" :data="chartData" :settings="chartSettings" />
    </div>
</template>

<script>
import vbar from 'v-charts/lib/histogram.common.js'
export default {
    components: {
        vbar
    },
    props: {
        value: Array
    },
    data () {
        this.chartSettings = {
            dimension: ['领域']
            // metrics: ['访问用户']
        }
        /*         this.extend = {
            series: {
                // 默认显示数据
                label: { show: true, position: 'top' }
            }
        } */
        return {
            total: 0,
            tableData: null,
            list: {
                领域: '领域',
                轮次: '轮次',
                偏好地区: '偏好地区'
            },
            tabHead: {
                创业者: '1',
                投资人: '2',
                服务商: '3',
                上班族: '4',
                在校生: '5'
            },
            query: {
                tab: '1',
                x: '',
                y: ''
            },
            chartData: {
                columns: ['日期', '访问用户', '下单用户', '下单率'],
                rows: [
                    { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
                    { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
                    { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
                    { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
                    { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
                    { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
                ]
            }
        }
    },
    computed: {
        list1 () {
            return this.FilterSelect(this.query.y)
        },
        list2 () {
            return this.FilterSelect(this.query.x)
        }
    },
    watch: {
        /*         chartData: {
            deep: true,
            immediate: true,
            handler (val) {
                this.$emit('input', val.rows || [])
            }
        } */

    },
    updated () {
        // this.$emit('input', this.chartData.rows || [])
        // this.Update()
        // console.log('更新')
    },
    created () {
        this.Query()
    },
    mounted () {
    },
    methods: {
        FilterSelect (select) {
            const obj = {}
            for (const key in this.list) {
                if (this.list[key] !== select) {
                    obj[key] = this.list[key]
                }
            }
            return obj
        },
        Update () {
            console.log('up!!!!!!!!!!!!!!!!!!!!')
            this.$emit('updata', { tableData: this.tableData, total: this.total, pageSize: this.query.pageSize, pageNum: this.query.pageNum })
        },
        Query () {
            return HTTP('用户画像').then(({ data: { chartData, pageList: { list, total } } }) => {
                this.chartData = chartData
                this.tableData = list
                this.total = total
                this.Update()
            })
        }
    }
}
</script>
